<template>
	<view @touchmove.stop.prevent="" v-if="info" class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
		<tm-menubars title="签名板" color="bg-gradient-primary-lighten"  :showback="true"></tm-menubars>
		<tm-sheet  :shadow="24">
			<view class="text-size-s text-weight-b mb-24">请在下方输入签名</view>
			<view class="grey-lighten-5 round-4">
				<tm-signBoard line-color="black" ref="qmla"></tm-signBoard>
			</view>
			
			<view class="flex-between pt-24">
				<tm-button @click="$refs.qmla.clear()" theme="blue">清空画板</tm-button>
				<!-- #ifndef H5 -->
				<tm-button @click="save" theme="blue">保存签名</tm-button>
				<!-- #endif -->
			</view>
		</tm-sheet>
		<tm-sheet color="black" :shadow="24">
			<view class="text-size-s text-weight-b mb-24">改变颜色和粗细</view>
			<view class="grey-darken-4 round-4">
				<tm-signBoard line-color="red" :line-width="12" ref="qmlad"></tm-signBoard>
			</view>
			<view class="flex-between pt-24">
				<tm-button @click="$refs.qmlad.clear()" theme="blue">清空画板</tm-button>
				<!-- #ifndef H5 -->
				<tm-button @click="save" theme="blue">保存签名</tm-button>
				<!-- #endif -->
			</view>
		</tm-sheet>
		<view style="height: 50upx;"></view>
	</view>

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmSignBoard from "@/tm-vuetify/components/tm-signBoard/tm-signBoard.vue"
	import tmButton from "@/tm-vuetify/components/tm-button/tm-button.vue"
	
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmSignBoard,tmButton},
		data() {
			return {
				info:null
			}
		},
		methods: {
			async save(){
				let url = await this.$refs.qmla.save();
				// #ifndef H5
				this.$tm.preview.previewImg(url)
				// #endif
				// #ifdef H5
				uni.$tm.toast("H5不可保存")
				// #endif
			}
		},
		onLoad() {
			this.info = uni.getSystemInfoSync()
		}
	}
</script>

<style>

</style>
